/*
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\pages\TodoList\OperatingItems\OperatingItemsForm.tsx
 * @Date: 2022-01-10 10:23:02
 * @LastEditTime: 2022-06-21 17:58:06
 */

import React from 'react'
import { http, IUdFormItem, UdForm, validators } from '@/lib'
import { Input, Select, Table } from 'antd'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import ProcessList from '@/components/ProcessList/index'
import todoApi from '@/apis/TodoList/index'
import approveModal from '@/components/ApproveModal'
import { WithToolbar } from '@/components/PhotoView'
const { Option } = Select
interface IProps {
  record: any
  todoType?: any
  refresh?: any
}
interface IState {
  recordDetail?: any
  approverList?: any
}

export default class ApproveForm extends React.Component<IProps, IState> {
  private labelCol: any = { span: 4 }
  private form: WrappedFormUtils
  private record = this.props.record || {}
  private todoType = this.props.todoType
  private refresh = this.props.refresh
  private roleIds = []
  private isLastApprover = false

  constructor(props: IProps, state: IState) {
    super(props)
    this.state = {
      approverList: [],
      recordDetail: { modifyType: null },
    }
  }
  componentDidMount() {
    this.getFromDetail()
    if (this.todoType === 1) {
      this.getNextApprover()
    }
  }

  private getFromDetail = () => {
    const {
      record: { traceCode: businessKey, brandCode },
    } = this.props
    let params = { businessKey, brandCode }
    http.get(todoApi.getOperatingItemsDetailByTaskId, { params }).then(res => {
      let values = { ...res.data }
      this.setState({ recordDetail: values })
    })
  }

  private getNextApprover = async () => {
    try {
      const approverRoles = await http.get(todoApi.getOperatingItemsNextTask, {
        params: { taskId: this.record.taskDefId },
      })
      if (approverRoles.data && approverRoles.data[0] && approverRoles.data[0]?.roleIds?.length > 0) {
        this.roleIds = approverRoles.data[0].roleIds
        const params = { ids: approverRoles.data[0].roleIds }
        const nextApprover = await http.post(todoApi.NextApproverList, params)
        const approverList = nextApprover.data.map(({ id: value, realName: title }) => ({ value, title }))
        this.setState({ approverList })
      } else {
        this.isLastApprover = true
      }
    } catch {}
  }

  private onOk = e => {
    const modalItems = !this.isLastApprover
      ? [
          {
            id: 'approveUserIds',
            label: '下一审批人',
            rules: [validators.required],
            render: () => {
              return (
                <Select mode="multiple" showSearch={true} optionFilterProp="children">
                  {this.state.approverList.map(item => (
                    <Option key={item.value} value={item.value}>
                      {item.title}
                    </Option>
                  ))}
                </Select>
              )
            },
          },
        ]
      : []
    approveModal({
      e,
      modalItems,
      taskId: this.record.taskDefId,
      roleIds: this.roleIds,
      refresh: this.refresh,
      todoType: this.todoType,
    })
  }
  render() {
    const columns = [
      {
        title: '物料名称',
        dataIndex: 'matName',
        key: 'matName',
      },
      {
        title: '物料编码',
        dataIndex: 'matCode',
        key: 'matCode',
      },
    ]
    let items: IUdFormItem[] = [
      { label: '品牌公司', id: 'brandName', render: () => <Input readOnly /> },
      { label: '客户编码', id: 'customerCode', render: () => <Input readOnly /> },
      { label: '客户名称', id: 'customerName', render: () => <Input readOnly /> },
      {
        label: '申请品项信息',
        id: 'operatingItems',
        wrapperCol: { span: 20 },
        render: (
          <>
            <Table columns={columns} dataSource={this.state?.recordDetail?.['operatingItems'] || []} />
          </>
        ),
      },
    ]
    return (
      <>
        <UdForm
          getForm={form => (this.form = form)}
          labelCol={this.labelCol}
          items={items}
          values={this.state.recordDetail}
        />
        <ProcessList record={this.state.recordDetail} />
      </>
    )
  }
}
